import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import './index.scss'

import { loginFn } from '../../api/user'

import { useDispatch } from 'react-redux'
import { changeUser } from '../../store/modules/user'

import { message } from 'antd';

// 路由 V5 版本跳转页面使用的是 useHistory
// import { useHistory } from 'react-router'

import { useNavigate } from 'react-router'


// import { } from 'react-router-dom'

const App = () => {

    const [messageApi, contextHolder] = message.useMessage();

    // 获取跳转页面的函数 router
    const router = useNavigate()

    // 获取触发修改全局状态的方法
    const dis = useDispatch()

    const onFinish = (values) => {
        // console.log('Received values of form: ', values);

        // 这里也可以添加表单验证
        // if (values.adminname.length < 6) {
        //     alert('输入内容不得少于 6 位')
        // }

        // 如果需要做加密这里直接调用加密方法进行处理即可
        // md5()

        loginFn(values).then(res => {

            if (res.code == 200) {

                res.data.loginState = true

                // console.log(res);
                dis(changeUser(res.data))

                messageApi.success('恭喜登录成功')
                // 跳转到首页
                router('/', {
                    state: {
                        name: '参数传递',
                        msg: '你好世界'
                    }
                })
            }

        })


    };
    return (
        <div className='login-box'>
            {/* 轻提示 */}
            {contextHolder}

            <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
            >
                <Form.Item
                    name="adminname"
                    rules={[
                        {
                            // 表单验证
                            required: true,
                            message: '请输入正确的管理员名称!',
                            // pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="管理员名称" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        },
                    ]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="管理员密码"
                    />
                </Form.Item>
                <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>

                    <a className="login-form-forgot" href="">
                        忘记密码
                    </a>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                    <a href="">去注册</a>
                </Form.Item>
            </Form>
        </div>
    );
};
export default App;